import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';
import {
  Box,
  Card,
  CardContent,
  Typography,
  Grid,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
  CircularProgress,
} from '@mui/material';
import axios from 'axios';
import { API_BASE_URL } from '../config';

function BlockDetail() {
  const { index } = useParams();
  const [block, setBlock] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchBlock();
  }, [index]);

  const fetchBlock = async () => {
    try {
      const response = await axios.get(`${API_BASE_URL}/chain`);
      const blocks = response.data.chain;
      const targetBlock = blocks.find(b => String(b.index) === String(index));
      setBlock(targetBlock);
      setLoading(false);
    } catch (error) {
      console.error('Error fetching block:', error);
      setLoading(false);
    }
  };

  if (loading) {
    return (
      <Box display="flex" justifyContent="center" alignItems="center" minHeight="60vh">
        <CircularProgress />
      </Box>
    );
  }

  if (!block) {
    return (
      <Box>
        <Typography variant="h4" color="error">
          区块未找到
        </Typography>
      </Box>
    );
  }

  return (
    <Box>
      <Typography variant="h4" gutterBottom>
        区块详情 #{block.index}
      </Typography>

      <Grid container spacing={3}>
        <Grid item xs={12} md={6}>
          <Card>
            <CardContent>
              <Typography variant="h6" gutterBottom>
                区块信息
              </Typography>
              <Typography variant="body1" gutterBottom>
                时间戳: {new Date(block.timestamp).toLocaleString()}
              </Typography>
              <Typography variant="body1" gutterBottom>
                前一个哈希: {block.previous_hash}
              </Typography>
              <Typography variant="body1" gutterBottom>
                当前哈希: {block.hash}
              </Typography>
              <Typography variant="body1" gutterBottom>
                随机数: {block.nonce}
              </Typography>
            </CardContent>
          </Card>
        </Grid>

        <Grid item xs={12}>
          <Card>
            <CardContent>
              <Typography variant="h6" gutterBottom>
                交易列表
              </Typography>
              <TableContainer component={Paper}>
                <Table>
                  <TableHead>
                    <TableRow>
                      <TableCell>发送方</TableCell>
                      <TableCell>接收方</TableCell>
                      <TableCell align="right">金额</TableCell>
                    </TableRow>
                  </TableHead>
                  <TableBody>
                    {block.transactions.map((tx, index) => (
                      <TableRow key={index}>
                        <TableCell>{tx.sender}</TableCell>
                        <TableCell>{tx.recipient}</TableCell>
                        <TableCell align="right">{tx.amount}</TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </TableContainer>
            </CardContent>
          </Card>
        </Grid>
      </Grid>
    </Box>
  );
}

export default BlockDetail; 